<template>
  <n-grid :cols="12" item-responsive responsive="screen">
    <n-gi span="12 m:8 l:6" offset="0 m:2 l:3">
      <n-space vertical>
        <n-button type="primary" @click="addTable">
          创建讨论
        </n-button>
        <template v-for="discuss in discussList">
          <n-card>
            <n-thing>
              <template #header>
                <n-button text @click="router.push({name:'teacher_discuss_detail',params:{discussID:discuss.discussID}})">{{ discuss.theme }}</n-button>
              </template>
              <template #header-extra>
                <n-space>
                  <n-tag type="info">
                    积分:{{ discuss.credit }}
                  </n-tag>
                </n-space>
              </template>
              <template #action>

                <n-space justify="end">
                  <n-button size="small" @click="handleCount(discuss.discussID)">
                    <template #icon>
                      <n-icon>
                        <ChartMultiple20Filled />
                      </n-icon>
                    </template>
                    讨论统计
                  </n-button>
                  <n-button size="small" @click="handleEdit(discuss)">
                    <template #icon>
                      <n-icon>
                        <Edit16Filled />
                      </n-icon>
                    </template>
                    编辑讨论
                  </n-button>
                  <n-button size="small" @click="handleDelete(discuss.discussID)" type="error" secondary>
                    <template #icon>
                      <n-icon>
                        <Delete20Filled />
                      </n-icon>
                    </template>
                    删除讨论
                  </n-button>
                </n-space>
              </template>
            </n-thing>
          </n-card>
        </template>

      </n-space>
    </n-gi>
  </n-grid>
  <n-modal v-model:show="showModal" preset="card" :title="modalTitle" style="width: auto">
    <n-form :rules="rules" ref="formRef" :model="formParams" label-placement="left" :label-width="80">
      <n-form-item label="主题" path="theme">
        <n-input v-model:value="formParams.theme"></n-input>
      </n-form-item>
      <n-form-item label="积分" path="credit">
        <n-input-number v-model:value="formParams.credit" :min="1"></n-input-number>
      </n-form-item>
    </n-form>
    <template #action>
      <n-space justify="end">
        <n-button @click="showModal = false">取消</n-button>
        <n-button type="primary" @click="handleSubmit">确定</n-button>

      </n-space>
    </template>
  </n-modal>
  <n-modal v-model:show="showCountModal" preset="card" title="测试统计" class=" overflow-scroll" style="width: 100%;height:100vh">
    <discussCount v-model:discussID='currentDiscussID'/>
  </n-modal>
</template>
<script lang="ts" setup>
import { http } from '@/utils/http/axios';
import { Delete20Filled, Edit16Filled, ChartMultiple20Filled } from '@vicons/fluent';
import { useDialog, useMessage } from 'naive-ui';
import { onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getDiscussList ,deleteDiscuss} from '@/api/teacher/discuss';
import discussCount from './discussCount.vue';

const route = useRoute();
const router = useRouter();

const modalTitle = ref('添加讨论');
const showModal = ref(false);
const formRef = ref();
const formBtnLoading = ref(false);
const discussList: any = ref([]);
const formParams = reactive({
  discussID: null,
  theme: null,
  credit: 0,
  courseID: route.params.courseID
});

const currentDiscussID = ref();
const showCountModal= ref(false);

const rules = {
  theme: {
    required: true,
    trigger: ['blur'],
    message: '请输入主题'
  },
  credit: {
    type: 'number',
    required: true,
    trigger: ['blur'],
    message: '请输入主题'
  }
}
function addTable() {
  formParams.theme = null;
  formParams.credit = 1;
  formParams.discussID = null;
  showModal.value = true;
}

onMounted(
  async () => {
    discussList.value = await getDiscussList({ courseID: route.params.courseID });
  }
)

const message = useMessage();
function handleSubmit(e) {
  e.preventDefault();
  formBtnLoading.value = true;
  formRef.value.validate((errors) => {
    if (!errors) {
      //message.success('新建成功');
      let params = formParams;
      let url = '';
      if (params.discussID) {
        url = '/teacher/teacher_discuss/editDiscuss'
      } else {
        url = '/teacher/teacher_discuss/addDiscuss'
      }
      http.request({
        url: url,
        method: 'post',
        params
      }).then(
        () => {
          message.success('成功');
          showModal.value = false;
          reloadList();
        }
      );
    } else {
      message.error('请填写完整信息');
    }
    formBtnLoading.value = false;
  });
}
function handleCount(discussID) {
  currentDiscussID.value = discussID;
  showCountModal.value=true;
}
function handleEdit(discuss) {
  formParams.theme = discuss.theme;
  formParams.credit = discuss.credit;
  formParams.discussID = discuss.discussID;
  showModal.value = true;
}

const dialog = useDialog()
function handleDelete(discussID) {
  dialog.info({
        title: '提示',
        content: `您想删除这道题吗`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            //message.success('删除成功');
            deleteDiscuss({ discussID: discussID }).then(
                () => {
                    message.success('成功');
                    reloadList();
                }
            )
        },
        onNegativeClick: () => { },
    });
}

async function reloadList() {
  discussList.value = await getDiscussList({ courseID: route.params.courseID });
}
</script>